<!DOCTYPE html>
<html>
    <head>
        <title>Da Nang Phone - Trang chủ</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="da nang phone" />
        <meta name="keywords" content="phone, android, gia re"/>
		<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
        <style>
			body{
				background:#333 url(bg.jpg) repeat top left;
				font-family:Arial;
			}
			span.reference{
				position:fixed;
				left:10px;
				bottom:10px;
				font-size:12px;
			}
			span.reference a{
				color:#aaa;
				text-transform:uppercase;
				text-decoration:none;
				text-shadow:1px 1px 1px #000;
				margin-right:30px;
			}
			span.reference a:hover{
				color:#ddd;
			}
			ul.sdt_menu{
				margin-top:150px;
			}
			h1.title{
				text-indent:-9000px;
				background:transparent url(title.png) no-repeat top left;
				width:633px;
				height:69px;
			}
			/* override button HOME */
			#sdt_menu li#sdt_menu_home a span#sdt_wrap_home {
				position: absolute;
				top: 25px;
				left: 0px;
				width: 170px;
				height: 60px;
				z-index: 15;
			}
			#sdt_menu li#sdt_menu_home a span#sdt_wrap_home span#sdt_link_home {
				color: white;
				font-size: 24px;
				float: left;
				clear: both;
				margin-left: 15px;
				text-transform: uppercase;
				text-shadow: 1px 1px 1px black;
			}
		</style>
    </head>

    <body>
		<div class="content">
			<h1 class="title">DaNangPhone</h1>
			<ul id="sdt_menu" class="sdt_menu">
				<li id="sdt_menu_home">
					<a href="#">
						<span id="sdt_wrap_home">
							<span id="sdt_link_home">Trang chủ</span>
						</span>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/about.png" alt=""/>
						<span class="sdt_active"></span>
						<span class="sdt_wrap">
							<span class="sdt_link">Giới thiệu</span>
							<span class="sdt_descr">Chúng tôi là ai</span>
						</span>
					</a>
					<div class="sdt_box">
							<a href="#">Lược sử</a>
							<a href="#">Danh hiệu</a>
					</div>
				</li>
				<li>
					<a href="#">
						<img src="images/service.png" alt=""/>
						<span class="sdt_active"></span>
						<span class="sdt_wrap">
							<span class="sdt_link">Dịch vụ</span>
							<span class="sdt_descr">Uy tín + Chất lượng</span>
						</span>
					</a>					
					<div class="sdt_box">
						<a href="#">Bảo hành</a>
						<a href="#">Sửa chữa</a>
						<a href="#">Nâng cấp</a>
					</div>
				</li>
				<li>
					<a href="#">
						<img src="images/tips.png" alt=""/>
						<span class="sdt_active"></span>
						<span class="sdt_wrap">
							<span class="sdt_link">Thủ thuật</span>
							<span class="sdt_descr">Vọc chuyên nghiệp</span>
						</span>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/news.png" alt=""/>
						<span class="sdt_active"></span>
						<span class="sdt_wrap">
							<span class="sdt_link">Tin tức</span>
							<span class="sdt_descr">Tám tí chơi</span>
						</span>
					</a>					
					<div class="sdt_box">
						<a href="#">Tám công nghệ</a>
						<a href="#">Tám xã hội</a>
						<a href="#">Tám đủ thứ</a>
					</div>
				</li>
				<li>
					<a href="#">
						<!--img src="images/connect.png" alt=""/-->
						<img src="images/touch.png" alt=""/>
						<span class="sdt_active"></span>
						<span class="sdt_wrap">
							<span class="sdt_link">Liên hệ</span>
							<span class="sdt_descr">Kết nối Đà Nẵng Phone</span>
						</span>
					</a>
				</li>
			</ul>
		</div>

        <!-- The JavaScript for slide box menu-->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script type="text/javascript" src="jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            $(function() {
				/**
				* for each menu element, on mouseenter, 
				* we enlarge the image, and show both sdt_active span and 
				* sdt_wrap span. If the element has a sub menu (sdt_box),
				* then we slide it - if the element is the last one in the menu
				* we slide it to the left, otherwise to the right
				*/
                $('#sdt_menu > li').bind('mouseenter',function(){
					var $elem = $(this);
					$elem.find('img')
						 .stop(true)
						 .animate({
							'width':'170px',
							'height':'170px',
							'left':'0px'
						 },400,'easeOutBack')
						 .andSelf()
						 .find('.sdt_wrap')
					     .stop(true)
						 .animate({'top':'140px'},500,'easeOutBack')
						 .andSelf()
						 .find('.sdt_active')
					     .stop(true)
						 .animate({'height':'170px'},300,function(){
						var $sub_menu = $elem.find('.sdt_box');
						if($sub_menu.length){
							var left = '170px';
							if($elem.parent().children().length == $elem.index()+1)
								left = '-170px';
							$sub_menu.show().animate({'left':left},200);
						}	
					});
				}).bind('mouseleave',function(){
					var $elem = $(this);
					var $sub_menu = $elem.find('.sdt_box');
					if($sub_menu.length)
						$sub_menu.hide().css('left','0px');
					
					$elem.find('.sdt_active')
						 .stop(true)
						 .animate({'height':'0px'},300)
						 .andSelf().find('img')
						 .stop(true)
						 .animate({
							'width':'0px',
							'height':'0px',
							'left':'85px'},400)
						 .andSelf()
						 .find('.sdt_wrap')
						 .stop(true)
						 .animate({'top':'25px'},500);
				});
            });
        </script>
    </body>
</html>